<template>
  <div class="container">
    <div id="chart_2" class="echarscss"></div>
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
  data() {
    return {};
  },
  mounted() {
    this.getDataPies();
  },
  methods: {
    getDataPies() {
      let cw = document.documentElement.clientWidth;
      let ch = document.documentElement.clientHeight;
      let w = cw * 0.25 + "px";
      let h = ch * 0.28 + "px";
      document.getElementById("chart_2").style.width = w;
      document.getElementById("chart_2").style.height = h;

      var myChart = echarts.init(document.getElementById("chart_2"));
      var giftImageUrl =
        "";
      myChart.setOption({
        backgroundColor: "#031845",
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} {d}%"
        },
        graphic: {
          elements: [
            {
              type: "image",
              style: {
                image: giftImageUrl,
                width: 45,
                height: 45
              },
              left: "center",
              top: "38%"
            }
          ]
        },
        title: {
          text: "业务办理量统计",
          left: "center",
          top: "52%",
          padding: [18, 0],
          textStyle: {
            color: "#fff",
            fontSize: 14,
            align: "center"
          }
        },
        // legend: {
        //   orient: "horizontal",
        //   icon: "circle",
        //   bottom: 18,
        //   x: "center",
        //   data: [
        //     "建设项目环境影响后评价备案",
        //     "一类放射性物品启运备案",
        //     "在野外进行放射性同位素示踪试验审批",
        //     "废弃电器电子产品拆解情况审核",
        //     "固体废物跨省贮存、处置审批",
        //     "废弃电器电子产品处理企业资格审批",
        //     "贮存危险废物超过一年的批准",
        //     "防治污染设施拆除或闲置审批",
        //     "江河、湖泊新建、改建或者扩大排污口审核",
        //     "企事业单位突发环境事件应急预案备案"
        //   ],
        //   textStyle: {
        //     color: "#fff"
        //   }
        // },
        series: [
          {
            name: "业务办理量统计",
            type: "pie",
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ["38%", "45%"],
            color: [
              "#006495",
              "#1D5F84",
              "#255C6D",
              "#3C5C67",
              "#40486C",
              "#3F3C73",
              "#403D84",
              "#1F3A8D",
              "#0B3B77"
            ],
            label: {
              normal: {
                position: "inner"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            tooltip: {
              show: false
            },

            data: [
              {
                value: 100,
                name: ""
              },
              {
                value: 100,
                name: ""
              },
              {
                value: 100,
                name: ""
              },
              {
                value: 100,
                name: ""
              },
              {
                value: 100,
                name: ""
              },
              {
                value: 100,
                name: ""
              },
              {
                value: 100,
                name: ""
              },
              {
                value: 100,
                name: ""
              },
              {
                value: 100,
                name: ""
              }
            ]
          },
          {
            name: "业务类型:",
            type: "pie",
            radius: ["43%", "55%"],
            color: [
              //   "#00FFFF",
              //   "#44EAB1",
              //   "#7BDD43",
              //   "#FEBE12",
              //   "#EBEC2F",
              //   "#FF7C44",
              //   "#FA3E5F",
              //   "#6635EF",
              //   "#FFAFDA"
              "#add8e6",
              "#6495ed",
              "#b0c4de",
              "#4682B4",
              "#87cefa",
              "#0286ff",
              "#4682B4",
              "#4169e1",
              "#1e90ff",
              "#87ceeb",
              "#034079",
              "#add8e6"
            ],
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 20,
                lineStyle: {
                  width: 2
                }
              }
            },
            label: {
              normal: {
                formatter: "{c|{c}}{d|{d}%}",
                //   formatter: '{c|{c}}\n{hr|}\n{d|{d}%}',
                rich: {
                  b: {
                    // fontSize: 20,
                    color: "#12EABE",
                    align: "left",
                    padding: 4
                  },
                  hr: {
                    borderColor: "#12EABE",
                    width: "100%",
                    borderWidth: 2,
                    height: 0
                  },
                  d: {
                    // fontSize: 20,
                    color: "#ddd",
                    align: "left",
                    padding: 4
                  },
                  c: {
                    // fontSize: 20,
                    // color: '#00ffff',
                    color: "#ddd",
                    align: "left",
                    padding: 4
                  }
                }
                // formatter: function(params) {
                //   return (
                //     "{white|" +
                //     params.name +
                //     "}\n{hr|}\n{yellow|" +
                //     params.value +
                //     "}{blue|" +
                //     params.percent +
                //     "%}"
                //   );
                // },
                // rich: {
                //   yellow: {
                //     color: "#ffc72b",
                //     padding: [5, 4],
                //     align: "center"
                //   },
                //   total: {
                //     color: "#ffc72b",
                //     align: "center"
                //   },
                //   white: {
                //     align: "center",
                //     padding: [4, 0]
                //   },
                //   blue: {
                //     color: "#49dff0",
                //     align: "center"
                //   },
                //   hr: {
                //     borderColor: "#0b5263",
                //     width: "100%",
                //     borderWidth: 1,
                //     height: 0
                //   }
                // }
              }
            },
            data: [
              {
                value: 20,
                name: "建设项目环境影响后评价备案"
              },
              {
                value: 10,
                name: "一类放射性物品启运备案"
              },
              {
                value: 19,
                name: "在野外进行放射性同位素示踪试验审批"
              },
              {
                value: 18,
                name: "废弃电器电子产品拆解情况审核"
              },
              {
                value: 17,
                name: "固体废物跨省贮存、处置审批"
              },
              {
                value: 19,
                name: "废弃电器电子产品处理企业资格审批"
              },
              {
                value: 35,
                name: "贮存危险废物超过一年的批准"
              },
              {
                value: 40,
                name: "防治污染设施拆除或闲置审批"
              },
              {
                value: 8,
                name: "江河、湖泊新建、改建或者扩大排污口审核"
              },
              {
                value: 16,
                name: "企事业单位突发环境事件应急预案备案"
              }
            ]
          }
        ]
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  .echarscss {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
}
</style>
